<!-- 修改密码 -->
<template>
  <div class="update-form">
    <el-form ref="formRef" :model="passForm" :rules="formRules">
      <el-form-item prop="oldPass">
        <el-input v-model.trim="passForm.oldPass" placeholder="请输入旧密码" show-password type="password"></el-input>
      </el-form-item>
      <el-form-item prop="newPass">
        <el-input v-model.trim="passForm.newPass" placeholder="请输入新密码" show-password type="password"></el-input>
      </el-form-item>
      <el-form-item prop="rePass">
        <el-input v-model.trim="passForm.rePass" placeholder="请确认新密码" show-password type="password"></el-input>
      </el-form-item>
      <el-button class="button" @click="commit()" type="primary">提交</el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const store = useStore();
const router = useRouter();

const passForm = ref({
  id: '',
  oldPass: '',
  newPass: '',
  rePass: '',
});
const userType = ref('');
const formRules = ref({
  oldPass: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
  ],
  newPass: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
  ],
  rePass: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
  ],
});

onMounted(() => {
  getUserType();
});

const commit = async () => {
  // 获得用户类别
  getUserType();

  setTimeout(() => {
    proxy.$refs.formRef.validate((valid) => {
      if (!valid) return;
    });
  }, 1000);

  // 判断
  if (userType.value == 1) {
    await proxy.$api.passwordAdmin({
      id: passForm.value.id,
      oldPass: passForm.value.oldPass,
      newPass: passForm.value.newPass,
      rePass: passForm.value.rePass
    })
  } else if (userType.value == 2) {
    // 讲师修改密码
    await proxy.$api.passwordTeacher({
      id: passForm.value.id,
      oldPass: passForm.value.oldPass,
      newPass: passForm.value.newPass,
      rePass: passForm.value.rePass
    })
  } else if (userType.value == 3) {
    await proxy.$api.passwordStudnet({
      id: passForm.value.id,
      oldPass: passForm.value.oldPass,
      newPass: passForm.value.newPass,
      rePass: passForm.value.rePass
    })
  }

  setTimeout(() => {
    store.commit('clearMenu');
    store.commit('clearToken');

    localStorage.removeItem('teacher');
    localStorage.removeItem('admin');
    localStorage.removeItem('teacher');
    router.push({
      name: "login",
    })
  }, 1000);

  ElMessage({ message: "修改密码成功 ，请重新登录", type: "success" });
  passForm.value.oldPass = '';
  passForm.value.newPass = '';
  passForm.value.rePass = '';
}

const getUserType = () => {
  // 讲师
  let teacher = window.localStorage.getItem('teacher')
  // 管理员
  let admin = window.localStorage.getItem('admin')
  // 学生
  let student = window.localStorage.getItem('student')

  if (admin != null) {
    // 管理员1
    userType.value = (JSON.parse(admin)).userType;
    passForm.value.id = (JSON.parse(admin)).id;
  } else if (teacher != null) {
    // 讲师2
    userType.value = (JSON.parse(teacher)).userType;
    passForm.value.id = (JSON.parse(teacher)).id;
  } else {
    // 学生3
    userType.value = (JSON.parse(student)).userType;
    passForm.value.id = (JSON.parse(student)).id;
  }
}

</script>

<style lang="less" scoped>
.update-form {
  width: 500px;
  border: 1px solid #eee;
  background-color: #ffffff;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  padding: 10px;
  border-radius: 3px;
  margin-top: 250px;
}

.button {
  display: flex;
  margin-left: 400px;
  justify-content: center;
}
</style>
